<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>黄金价格计算器</title>
    <script src="../js/vue.js"></script>
</head>

<style>
    body {
        background-color: #f5f5f5;
    }

    #app {
        background-color: #fff;
        width: 400px;
        /* border: 1px solid #999; */
        margin: 10px auto;
        padding: 20px;
        box-shadow: 0 0 10px 1px #999;
    }

    label {
        font-size: 20px;
    }

    input {
        height: 35px;
        margin: 10px;
        border: 2px solid #999;
        border-radius: 3px;
        padding: 0 10px;
        outline: none;
        font-size: 16px;
    }

    span {
        color: red;
        font-weight: 600;
    }

    p {
        font-size: 18px;
        line-height: 45px;
        color: #666;
    }

    i {
        color: blue;
    }
</style>

<body>
    <div id='app'>
        <h3 align='center'>黄金价格计算器</h3>
        <label>买入单价：</label>
        <input v-model.number="buyPrice" type="number">
        <span>元/克</span> <br>
        <label>卖出单价：</label>
        <input v-model.number="sellPrice" type="number">
        <span>元/克</span> <br>
        <label>手续费率：</label>
        <input v-model.number="feeRate" type="number">
        <span>%</span> <br>
        <label>购买数量：</label>
        <input v-model.number="quantity" type="number">
        <span>克</span> <br>
        <hr>
        <p>
            成本价： <i>{{ costPrice }}</i> <br>
            卖出价：<i>{{ totalSellPrice }}</i><br>
            手续费：<i>{{ fee }}</i><br>
            赎回获得：<i>{{ netSellPrice }}</i><br>
            净收入：<i>{{ netIncome }}</i>
        </p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    buyPrice: 0,
                    sellPrice: 0,
                    feeRate: 0,
                    quantity: 0
                };
            },
            computed: {
                costPrice() {
                    return (this.buyPrice * this.quantity).toFixed(2);
                },
                totalSellPrice() {
                    return (this.sellPrice * this.quantity).toFixed(2);
                },
                fee() {
                    return (this.totalSellPrice * (this.feeRate / 100)).toFixed(2);
                },
                netSellPrice() {
                    return (this.totalSellPrice - this.fee).toFixed(2);
                },
                netIncome() {
                    return (this.netSellPrice - this.costPrice).toFixed(2);
                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>